﻿@model CottagesOfHope.ViewModels.Registration
@{
    ViewBag.Title = "Register";
}

<div class="titleBar">
    @*<h1>@ViewBag.Title.</h1>*@
    <h2>Create Profile</h2>
</div>
<br />
<br />

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <div id="myCarousel" class="carousel slide">

        <!-- Carousel items -->
        <div class="carousel-inner">

            <!-- Registration Part 1-->
            <div class="active item">

                <div class="well transparent regForm">
                    <div class="form-horizontal">
                        <!-- Breadcrumb and Progress Bar-->
                        <div class="customCrumb">
                            <p><span style="color: #000;">Name & Birthdate</span> &nbsp <i class="icon-chevron-right"></i>&nbsp Home Address  &nbsp <i class="icon-chevron-right"></i>&nbsp Additional Contact Info  &nbsp <i class="icon-chevron-right"></i>&nbsp Username & Password</p>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="bar" style="width: 23%;"></div>
                        </div>
                        <br />
                        <div class="control-group">
                            <label class="control-label" for="inputFirstName">First Name</label>
                            <div class="controls">
                                <input type="text" id="inputFirstName" name="UserProfile.FirstName" placeholder="John">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="inputMI">Middle Initial</label>
                            <div class="controls">
                                <input type="text" class="span1" id="inputMI" name="UserProfile.MiddleName" placeholder="M">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="inputLastName">Last Name</label>
                            <div class="controls">
                                <input type="text" id="inputLastName" name="UserProfile.LastName" placeholder="Doe">
                            </div>
                        </div>
                        <br />
                        <div class="control-group">
                            <label class="control-label" for="inputBirthdate">Birthdate</label>
                            <div class="controls controls-row">
                                <input class="span3" type="text" id="datepicker" name="UserProfile.BirthDate" placeholder="mm/dd/yyyy" required />
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#myCarousel" data-slide="next" class="btn btn-large">Next</a>
            </div>

            <!-- Registration Part 2-->
            <div class="item">

                <div class="well transparent regForm">
                        <!-- Breadcrumb and Progress Bar-->
                        <div class="customCrumb">
                            <p>Name & Birthdate &nbsp <i class="icon-chevron-right"></i>&nbsp <span style="color: #000;">Home Address</span>  &nbsp <i class="icon-chevron-right"></i>&nbsp Additional Contact Info  &nbsp <i class="icon-chevron-right"></i>&nbsp Username & Password</p>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="bar" style="width: 44%;"></div>
                        </div>
                        <br />
                        <br />
                        <div class="span4">
                            <div class="controls">
                                <label>Street Address</label>
                            <input class="span4" type="text" id="street" name="UserProfile.Address" placeholder="Street Address">
                            </div>
                            <div class="controls controls-row">
                                <label>City <span style="margin-left: 215px;">State</span></label>
                            <input class="span3" type="text" id="city" name="UserProfile.City" placeholder="City">
                            <input class="span1" type="text" id="state" name="UserProfile.State" placeholder="State">
                            </div>
                        </div>
                        <div class="span2">
                            <label>Apt#</label>
                        <input class="span2" type="text" id="apt" name="UserProfile.Apartment" placeholder="Apt #">
                            <label>Zip</label>
                        <input class="span2" type="text" id="zip" name="UserProfile.Zip" placeholder="Zip">
                        </div>
                </div>
                <a href="#myCarousel" data-slide="prev" class="btn btn-large btn-inverse">Back</a>&nbsp;&nbsp;
                            <a href="#myCarousel" data-slide="next" class="btn btn-large">Next</a>
            </div>

            <!-- Registration Part 3-->
            <div class="item">
                <div class="well transparent regForm">
                        <!-- Breadcrumb and Progress Bar-->
                        <div class="customCrumb">
                            <p>Name & Birthdate &nbsp <i class="icon-chevron-right"></i>&nbsp Home Address  &nbsp <i class="icon-chevron-right"></i>&nbsp <span style="color: #000;">Additional Contact Info</span>  &nbsp <i class="icon-chevron-right"></i>&nbsp Username & Password</p>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="bar" style="width: 73%;"></div>
                        </div>
                        <br />
                        <div class="controls controls-row">
                            <label>Phone</label>
                        <input class="span3" type="tel" id="primaryPhone" name="UserProfile.MobilePhone" placeholder="Primary Phone" onkeypress="mask(this)" required />
                        <input class="span3" type="tel" id="alternatePhone" name="UserProfile.WorkPhone" placeholder="Alternate Phone" onkeypress="mask(this)" />
                        </div>
                        <div class="controls controls-row">
                            <label>Email</label>
                        <input class="span3" type="email" id="personalEmail" name="UserProfile.Email" placeholder="Personal Email" required />
                        <input class="span3" type="email" id="workEmail" placeholder="Work Email" />
                        </div>
                        <div class="controls controls-row">
                            <label>How did you hear about us?</label>
                            <select class="span4">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                </div>
                <a href="#myCarousel" data-slide="prev" class="btn btn-large btn-inverse">Back</a>&nbsp;&nbsp;
                            <a href="#myCarousel" data-slide="next" class="btn btn-large">Next</a>
            </div>
            <!-- Registration Part 4-->
            <div class="item">
                <div class="well transparent regForm">
                    <div class="form-horizontal">
                        <!-- Breadcrumb and Progress Bar-->
                        <div class="customCrumb">
                            <p>Name & Birthdate &nbsp <i class="icon-chevron-right"></i>&nbsp Home Address  &nbsp <i class="icon-chevron-right"></i>&nbsp Additional Contact Info  &nbsp <i class="icon-chevron-right"></i>&nbsp <span style="color: #000;">Username & Password</span></p>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="bar" style="width: 100%;"></div>
                        </div>
                        <br />
                        <br />
                        <div class="control-group">
                            <label class="control-label" for="inputUserName">Preferred Username</label>
                            <div class="controls">
                                <input type="text" id="inputUserName" placeholder="JohnDoe84" />
                            </div>
                        </div>
                        <br />
                        <div class="control-group">
                            <label class="control-label" for="inputPassword">User Password</label>
                            <div class="controls">
                                <input type="password" id="inputPassword" name="PasswordModel.Password" placeholder="Password" />
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="confirmPassword">Confirm Password</label>
                            <div class="controls">
                                <input type="password" id="confirmPassword" placeholder="Confirm Password" />
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#myCarousel" data-slide="prev" class="btn btn-large btn-inverse">Back</a>&nbsp;&nbsp;
                <button type="submit" class="btn btn-large" value="Register">Submit</button>
            </div>
                </div>
                </div>
    
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
     <script type="text/javascript">

         // Jquery user name generator
         $('#GenerateUserName').on('click', function () {
             var inputUserName = $('#inputFirstName').val() + $('#inputLastName').val() + $('#birthYear').val().substring(2);
             $('#inputUserName').attr('value', inputUserName);
         });

         // phone number mask
         function mask(f) {
             tel = '(';
             var val = f.value.split('');
             for (var i = 0; i < val.length; i++) {
                 if (val[i] == '(') {
                     val[i] = ''
                 }
                 if (val[i] == ')') {
                     val[i] = ''
                 }
                 if (val[i] == '-') {
                     val[i] = ''
                 }
                 if (val[i] == '') {
                     val[i] = ''
                 }
             }
             //
             for (var i = 0; i < val.length; i++) {
                 if (i == 3) { val[i] = val[i] + ')' }
                 if (i == 7) { val[i] = val[i] + '-' }
                 tel = tel + val[i]
             }
             f.value = tel;
         }

         $(function () {
             $('.carousel').each(function () {
                 $(this).carousel({
                     interval: false
                 });
             });
         });
        </script>
}
